<template>
    <section>
        <div class="page-content">
            <el-card :body-style="{ padding: '10px' }" >
                <div slot="header">
                    <el-form :inline="true" :model="form" @keyup.enter.native="fetchList">
                        <el-form-item>
                            <el-input v-model="form.keyword" placeholder="关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="fetchList">查询</el-button>
                        </el-form-item>
                        <el-form-item v-if="hasResource('${slave.camelName}:add')">
                            <el-button type="primary" @click="handleAdd" icon="el-icon-edit" :disabled="!form.parentId">新增</el-button>
                        </el-form-item>
                        <el-form-item v-if="hasResource('${slave.camelName}:batchDel')">
                            <el-button type="danger" @click="batchDel()" :disabled="multipleSelection.length==0">批量删除</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="records" ref="dataTable" class="el-table--condensed" style="width: 100%"
                          highlight-current-row v-loading="loading" @row-click="selectRow" height="600"  @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <el-table-column type="index" width="60">
                    </el-table-column>
                <#list slave.columnList as item >
                    <#if item.name!="id">
                        <el-table-column prop="${item.name}" label="${item.comment}" sortable>
                        </el-table-column>
                    </#if>
                </#list>

                    <el-table-column label="操作" width="400">
                        <template scope="scope">
                            <el-button type="text" v-if="hasResource('${slave.camelName}:edit')" size="small" @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button type="text" v-if="hasResource('${slave.camelName}:delete')" size="small" @click="handleDel(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.curPage" :total="total" :page-size="form.pageSize" :page-sizes="[50,100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </el-card>
        </div>
        <${slave.hyphenName}-edit v-if="editVisible" ref="addOrUpdate" @refreshDataList="fetchList"></${slave.hyphenName}-edit>
    </section>
</template>
<script>
    import ${slave.camelName}Edit from './${slave.className}Edit.vue'
    export default {
        components: {
            ${slave.camelName}Edit
        },
        data() {
            return {
                multipleSelection: [],
                editVisible: false,
                form: {
                    keyword: '',
                     parentId:'',
                    curPage: 1,
                    pageSize: 50,
                },
                records: [],
                total: 0,
                loading: false,
            }
        },
        methods: {
             setParent(parentId){
                this.form.parentId=parentId
                this.fetchList()
            },
            fetchList() {
                this.loading = true
                let params = {
                    params: this.form
                }
                this.$http
                        .get('/api/${slave.camelName}/list', params)
                        .then(({
                            data
                        }) => {
                    this.loading = false
                this.records = data.records
                this.total = data.total

            })
            .catch(e => {
                    this.loading = false;
                console.log(e)
                this.$message({
                    message: '网络故障' + e,
                    type: 'error'
                })
            })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAdd() {
                this.editVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init({${parentKeyCamel}:this.form.parentId})
            })
            },
            handleEdit(id, ${slave.camelName}) {
                this.editVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(${slave.camelName})
            })
            },
            handleDel(index, ${slave.camelName}) {
                this.del${slave.className}([${slave.camelName}.id])
            },
            batchDel() {
                console.log(this.multipleSelection)
                if (this.multipleSelection.length != 0) {
                    let ids = this.multipleSelection.map(item => item.id)
                    this.del${slave.className}(ids)
                }
            },
            del${slave.className}(ids) {
                if (!ids || ids.length == 0) {
                    return;
                }
                console.log(ids)
                this.$confirm(`确定进行[删除]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/api/${slave.camelName}/delete', ids)
                        .then(({
                            data
                        }) => {
                    if (data && data.success === true) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                        this.fetchList()
                }
                })
                } else {
                    this.$message.error(data.msg)
                }
            })
            })
            },
            selectRow() {

            },
            handleCurrentChange(val) {
                this.form.curPage = val
                this.fetchList()
            },
            handleSizeChange(val) {
                this.form.pageSize = val
                this.fetchList()
            }
        },
        mounted() {
            this.fetchList()
        }
    }
</script>